{template 'common/header'}
<style>
	.content{
		overflow: hidden!important;
	}
	.hkg_box{width: 100%;  position: relative; height: 650px;  padding-left:480px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
	.hkg_box .lt{position: absolute;top: 5px;left: 7px;width: 450px;height: 600px;}
	.hkg_box .rt{width: 100%;}
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{

		padding-right: 0;

	}

	.toast_block{
		display: none;
	}
	.toast_mask{
		background: rgba(0,0,0,0.3);
		position: fixed;
		z-index: 10000;
		top: 0;right: 0;left: 0;bottom: 0;
	}
	.toast_content{
		position: absolute;
		top: 0;right: 0;left: 0;bottom: 0;
		margin: auto;
		width: 400px;
		height: 400px;
		z-index: 20000;
	}
	#seeimg{
		width: 300px;
		margin: 0 auto;
		height: auto;
	}
</style>
<ul class="nav nav-tabs">
	<li {if $op == 'list'}class="active"{/if}>
		<a href="{php echo $this->createWebUrl('poster')}">海报模板列表</a>
	</li>
	<li {if $op == 'post'}class="active"{/if}>
		<a href="{php echo $this->createWebUrl('poster',array('op'=>'post'))}">{if empty($id)}创建图片{else}修改图片{/if}</a>
	</li>
</ul>
{if $op == 'list'}
<div>
	<table class="table table-hover table-bordered" style="table-layout:fixed">
		<tr>
			<th style="width:8%">序号</th>
			<th >预览</th>
			<th >包含项</th>
			<th >状态</th>
			<th >操作</th>
		</tr>
		{loop $list $item}
		<tr>
			<td>{$item['id']}</td>
			<td style="text-align: center;"><img  data="{$item['id']}" src="{$item['poster']}" style="height:100px" onclick="get_img('{$item["poster"]}')"></td>
			<td style="display: none;" id="img{$item['id']}"><img  src="{$item['poster']}" style="width:300px;height: auto;"></td>
			<td>
				{loop $item['option'] $option}
				{$option}<br/>
				{/loop}
			</td>
			<td>
				<div class="btn {if $item['status'] == 2}btn-danger{else}btn-info{/if}" data="{$item['id']}" onclick="changestatus(this)">{if $item['status'] == 2}不展示{else}已展示{/if}</div>
			</td>
			<td>
				<a href="{php echo $this->createWebUrl('poster',array('op'=>'post','id'=>$item['id']))}" class="btn btn-info">编辑</a>
				<a href="javascript:void(0)" onclick="del({$item['id']})" class="btn btn-danger">删除</a>
			</td>
		</tr>
		<!--<div class="modal fade" id="poster" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">
							海报预览图
						</h4>
					</div>
					<div class="modal-body" style="text-align: center">
						<img src="{$item['poster']}" alt="" style="width:308px;height:423px">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>-->
		{/loop}
	</table>

	<script type="text/javascript">
        function changestatus(obj){
            var obj = $(obj);
            var id = obj.attr('data');
            if(obj.hasClass('btn-danger')){
                var sta = 1;
            }else{
                var sta = 0;
            }
            $.ajax({
                type:'post',
                url:"{php echo $this->createWebUrl('poster',array('op'=>'changestatus'))}",
                data:{id:id,sta:sta},
                success:function(res){
                    var res = JSON.parse(res);
                    if(res.code == 200){
                        if(sta == 1){
                            obj.removeClass('btn-danger');
                            obj.addClass('btn-info');
                            obj.html('已展示');
                        }else{
                            obj.removeClass('btn-info');
                            obj.addClass('btn-danger');
                            obj.html('不展示');
                        }
                    }else{
                        alert(res.mess);
                    }
                }
            });
        }
		function get_img(url) {
			$('#seeimg').attr("src", url);
			$('.toast_block').show();
		}
        function del(id){
            var id = id;
            $.ajax({
                type:'post',
                url:"{php echo $this->createWebUrl('poster',array('op'=>'delete'))}",
                data:{id:id},
                success:function(res){
                    var res = JSON.parse(res);
                    if(res.code == 200){
                        location.reload();
                    }else{
						alert('请稍后再试');
					}
                }
            });
        }

	</script>
</div>
{elseif $op == 'post'}
<div class="hkg_box">
<div class="lt"  >

	<div style="width: 431px;height:592px;border: 1px solid green;margin-top: 10px;background: url('{if !empty($info)}{php echo $_W['attachurl'].$info['bgimg']}{/if}') no-repeat center/cover;position: relative;" id="bgimg" >
		<img class="start0" src="{MODULE_URL}images/img/qrcode.png" alt="" id="qrcode" style="width:80px;height:80px;position: absolute;left:0px;top:0px;{if empty($info['option'])}display:block;{else}{if in_array(1,$info['option'])}display:block{else}display:none;{/if}{/if}">
		<img class="start1" src="{MODULE_URL}images/img/headimg.png" alt="" id="headimg" style="width:80px;height:80px;position: absolute;left:0px;top:80px;{if empty($info['option'])}display:block;{else}{if in_array(2,$info['option'])}display:block{else}display:none;{/if}{/if}">
		<span class="start2"  id="nickimg" style="position: absolute;left:0px;top:160px;font-size:16px;color:#000000;{if empty($info['option'])}display:block;{else}{if in_array(3,$info['option'])}display:block{else}display:none;{/if}{/if}">
			用户昵称
		</span>
		<span class="start3" id="studyday" style="position: absolute;left:0px;top:180px;display:none;font-size:16px;color:#000000;{if in_array(4,$info['option'])}display:block{else}display:none;{/if}">
			999
		</span>
		<span class="start4" id="date" style="position: absolute;left:0px;top:200px;display:none;font-size:16px;color:#000000;{if in_array(5,$info['option'])}display:block{else}display:none;{/if}">
			2019/08/05 星期一
		</span>
	</div>
	<div style="text-align: center">图片尺寸固定为616*846像素,缩放了0.7</div>
</div>
<div  style="padding-top:15px" >
	<div>
		<form action="" method="post" class="form-horizontal form" >
			<div class="form-group" >
				<label class="col-sm-1 control-label">背景图片</label>
				<div class="col-sm-11">
					{php echo tpl_form_field_image('bgimg',$info['bgimg']);}
					<span  class="help-block">图片宽度616px  高度846px</span>
				</div>
			</div>
			<!--设置开启项-->
			<div class="form-group">
				<label class="col-sm-1 control-label">开启项</label>
				<div class="col-sm-11">
					<label class="radio-inline">
						<input type="checkbox" class="start_option"  name="start_option[]" {if empty($info['option'])}checked{else}{if in_array(1,$info['option'])}checked{/if}{/if} value="1" title="二维码">二维码
					</label>
					<label class="radio-inline">
						<input type="checkbox" class="start_option"  name="start_option[]" {if empty($info['option'])}checked{else}{if in_array(2,$info['option'])}checked{/if}{/if} value="2" title="头像" >头像
					</label>
					<label class="radio-inline">
						<input type="checkbox" class="start_option"  name="start_option[]" {if empty($info['option'])}checked{else}{if in_array(3,$info['option'])}checked{/if}{/if} value="3" title="昵称" >昵称
					</label>
					<label class="radio-inline">
						<input type="checkbox" class="start_option"  name="start_option[]" {if !empty($info['option'])}{if in_array(4,$info['option'])}checked{/if}{/if} value="4" title="学习天数" >学习天数
					</label>
					<label class="radio-inline">
						<input type="checkbox" class="start_option"  name="start_option[]" {if !empty($info['option'])}{if in_array(5,$info['option'])}checked{/if}{/if} value="5" title="日期" >日期
					</label>
					<span class="help-block">选择海报显示项</span>
				</div>
			</div>
			<!--具体具体开启项参数设置-->
			<div class="form-group start_0" {if empty($info['option'])}style="display:block;"{else}{if in_array(1,$info['option'])}style="display:block;"{else}style="display:none;"{/if}style="display:none;"{/if}>
				<label class="col-sm-1 control-label">二维码</label>
				<div class="col-sm-11">
					<div class="col-md-3 ">
						<label  class=" control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">左边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="qrcode_left_px" placeholder="单位px" value="{if empty($info['qrcode_left_px'])}0{else}{php echo $info['qrcode_left_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">上边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="qrcode_top_px" placeholder="单位px" value="{if empty($info['qrcode_top_px'])}0{else}{php echo $info['qrcode_top_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class=" control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">宽度</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="qrcode_width_px" placeholder="单位px" value="{if empty($info['qrcode_width_px'])}80{else}{php echo $info['qrcode_width_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3">
						<label  class=" control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">高度</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="qrcode_height_px" placeholder="单位px" value="{if empty($info['qrcode_height_px'])}80{else}{php echo $info['qrcode_height_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<!--<span class="help-block">单位为像素,px</span>-->
				</div>
			</div>
			<div class="form-group start_1" {if empty($info['option'])}style="display:block;"{else}{if in_array(2,$info['option'])}style="display:block;"{else}style="display:none;"{/if}style="display:none;"{/if} >
				<label class="col-sm-1 control-label">头像</label>
				<div class="col-sm-11">
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">左边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="head_left_px" placeholder="单位px" value="{if empty($info['head_left_px'])}0{else}{php echo $info['head_left_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">上边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="head_top_px" placeholder="单位px" value="{if empty($info['head_top_px'])}80{else}{php echo $info['head_top_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">宽度</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="head_width_px" placeholder="单位px" value="{if empty($info['head_width_px'])}80{else}{php echo $info['head_width_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">高度</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="head_height_px" placeholder="单位px" value="{if empty($info['head_height_px'])}80{else}{php echo $info['head_height_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<!--<span class="help-block">单位为像素,px</span>-->
				</div>
			</div>
			<div class="form-group start_2" {if empty($info['option'])}style="display:block;"{else}{if in_array(3,$info['option'])}style="display:block;"{else}style="display:none;"{/if}style="display:none;"{/if} >
				<label class="col-sm-1 control-label">昵称</label>
				<div class="col-sm-11" >
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">左边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="nick_left_px" placeholder="单位px" value="{if empty($info['nick_left_px'])}0{else}{php echo $info['nick_left_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">上边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="nick_top_px" placeholder="单位px" value="{if empty($info['nick_top_px'])}160{else}{php echo $info['nick_top_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label"  style="display: inline-block;vertical-align: middle;width: 58px;margin-top: -6px;">字体大小</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="nick_size_px" placeholder="单位px" value="{if empty($info['nick_size_px'])}16{else}{php echo $info['nick_size_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label"  style="display: inline-block;vertical-align: middle;width: 58px;margin-top: -6px;">字体颜色</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 85px;">
							<input type="text" name="nick_font_color" placeholder="#000000" value="{if empty($info['nick_font_color'])}#000000{else}{php echo $info['nick_font_color'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>
					</div>
					<!--<span class="help-block">边距、字体大小单位为px,字体大小建议填写偶数,字体颜色请使用16进制描述，例如：#3c3c3c</span>-->
				</div>
			</div>
			<div class="form-group start_3" {if empty($info['option'])}style="display:none"{else}{if in_array(4,$info['option'])}style="display:block"{else}style="display:none"{/if}{/if} >
				<label class="col-sm-1 control-label">学习天数</label>
				<div class="col-sm-11" >
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">左边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="study_day_left_px" placeholder="单位px" value="{if empty($info['study_day_left_px'])}0{else}{php echo $info['study_day_left_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">上边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="study_day_top_px" placeholder="单位px" value="{if empty($info['study_day_top_px'])}180{else}{php echo $info['study_day_top_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 58px;margin-top: -6px;">字体大小</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="study_day_size_px" placeholder="单位px" value="{if empty($info['study_day_size_px'])}16{else}{php echo $info['study_day_size_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 58px;margin-top: -6px;">字体颜色</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 85px;">
							<input type="text" name="study_day_font_color" placeholder="#000000" value="{if empty($info['study_day_font_color'])}#000000{else}{php echo $info['study_day_font_color'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>
					</div>
					<!--<span class="help-block">边距、字体大小单位为px,字体大小建议填写偶数,字体颜色请使用16进制描述，例如：#3c3c3c</span>-->
				</div>
			</div>
			<div class="form-group start_4" {if empty($info['option'])}style="display:none"{else}{if in_array(5,$info['option'])}style="display:block"{else}style="display:none"{/if}{/if} >
				<label class="col-sm-1 control-label">海报日期</label>
				<div class="col-sm-11" >
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">左边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="date_left_px" placeholder="单位px" value="{if empty($info['date_left_px'])}0{else}{php echo $info['date_left_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 50px;margin-top: -6px;">上边距</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="date_top_px" placeholder="单位px" value="{if empty($info['date_top_px'])}200{else}{php echo $info['date_top_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 58px;margin-top: -6px;">字体大小</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 70px;">
							<input type="number" name="date_size_px" placeholder="单位px" value="{if empty($info['date_size_px'])}16{else}{php echo $info['date_size_px'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>px
					</div>
					<div class="col-md-3 ">
						<label  class="control-label" style="display: inline-block;vertical-align: middle;width: 58px;margin-top: -6px;">字体颜色</label>
						<div class="" style="display: inline-block;vertical-align: middle;width: 85px;">
							<input type="text" name="date_font_color" placeholder="#000000" value="{if empty($info['date_font_color'])}#000000{else}{php echo $info['date_font_color'];}{/if}" class="form-control" style="border-radius: 6px;" >
						</div>
					</div>
					<!--<span class="help-block">边距、字体大小单位为px,字体大小建议填写偶数,字体颜色请使用16进制描述，例如：#3c3c3c</span>-->
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"></label>
				<div class="col-sm-4">
					<input type="hidden" name="token" value="{$_W['token']}" />
					<input name="submit" type="submit" value="保存" class="btn btn-success btn-block" />
				</div>
			</div>
		</form>
	</div>
</div>
</div>
{/if}
<script>
    //设置海报选项那些显示那些不显示
    $('.start_option').change(function () {
        var set = document.getElementsByClassName('start_option');
        for(var i=0;i<set.length;i++){
            if(set[i].checked == true){
                $('.start_'+i).show();
                $('.start'+i).show();
            }else{
                $('.start_'+i).hide();
                $('.start'+i).hide();
            }
        }
    });

    //二维码
    $('.img-responsive').bind('load',function () {
        $('#bgimg').css('background-image',"url('"+$('.img-responsive').attr('src')+"')");
    });
    $('#qrcode').css('left',$('input[name="qrcode_left_px"]').val()+'px');
    $('#qrcode').css('top',$('input[name="qrcode_top_px"]').val()+'px');
    $('#qrcode').css('width',$('input[name="qrcode_width_px"]').val()+'px');
    $('#qrcode').css('height',$('input[name="qrcode_height_px"]').val()+'px');
    $('input[name="qrcode_left_px"]').bind('input propertychange change',function(){
        $('#qrcode').css('left',$(this).val()+'px');
    })
    $('input[name="qrcode_top_px"]').bind('input propertychange change',function(){
        $('#qrcode').css('top',$(this).val()+'px');
    })
    $('input[name="qrcode_width_px"]').bind('input propertychange change',function(){
        $('#qrcode').css('width',$(this).val()+'px');
    })
    $('input[name="qrcode_height_px"]').bind('input propertychange change',function(){
        $('#qrcode').css('height',$(this).val()+'px');
    })
    //用户头像
    $('.img-responsive').bind('load',function () {
        $('#headimg').css('background-image',"url('"+$('.img-responsive').attr('src')+"')");
    });
    $('#headimg').css('left',$('input[name="head_left_px"]').val()+'px');
    $('#headimg').css('top',$('input[name="head_top_px"]').val()+'px');
    $('#headimg').css('width',$('input[name="head_width_px"]').val()+'px');
    $('#headimg').css('height',$('input[name="head_height_px"]').val()+'px');
    $('input[name="head_left_px"]').bind('input propertychange change',function(){
        $('#headimg').css('left',$(this).val()+'px');
    })
    $('input[name="head_top_px"]').bind('input propertychange change',function(){
        $('#headimg').css('top',$(this).val()+'px');
    })
    $('input[name="head_width_px"]').bind('input propertychange change',function(){
        $('#headimg').css('width',$(this).val()+'px');
    })
    $('input[name="head_height_px"]').bind('input propertychange change',function(){
        $('#headimg').css('height',$(this).val()+'px');
    })
    //用户昵称
    $('#nickimg').css('left',$('input[name="nick_left_px"]').val()+'px');
    $('#nickimg').css('top',$('input[name="nick_top_px"]').val()+'px');
    $('#nickimg').css('font-size',$('input[name="nick_size_px"]').val()+'px');
    $('#nickimg').css('color',$('input[name="nick_font_color"]').val());
    $('input[name="nick_left_px"]').bind('input propertychange change',function(){
        $('#nickimg').css('left',$(this).val()+'px');
    })
    $('input[name="nick_top_px"]').bind('input propertychange change',function(){
        $('#nickimg').css('top',$(this).val()+'px');
    })
    $('input[name="nick_size_px"]').bind('input propertychange change',function(){
        $('#nickimg').css('font-size',$(this).val()+'px');
    })
    $('input[name="nick_font_color"]').bind('input propertychange change',function(){
        $('#nickimg').css('color',$(this).val());
    })
    //学习天数
    $('#studyday').css('left',$('input[name="study_day_left_px"]').val()+'px');
    $('#studyday').css('top',$('input[name="study_day_top_px"]').val()+'px');
    $('#studyday').css('font-size',$('input[name="study_day_size_px"]').val()+'px');
    $('#studyday').css('color',$('input[name="study_day_font_color"]').val());
    $('input[name="study_day_left_px"]').bind('input propertychange change',function(){
        $('#studyday').css('left',$(this).val()+'px');
    })
    $('input[name="study_day_top_px"]').bind('input propertychange change',function(){
        $('#studyday').css('top',$(this).val()+'px');
    })
    $('input[name="study_day_size_px"]').bind('input propertychange change',function(){
        $('#studyday').css('font-size',$(this).val()+'px');
    })
    $('input[name="study_day_font_color"]').bind('input propertychange change',function(){
        $('#studyday').css('color',$(this).val());
    })
    //日期
    $('#date').css('left',$('input[name="date_left_px"]').val()+'px');
    $('#date').css('top',$('input[name="date_top_px"]').val()+'px');
    $('#date').css('font-size',$('input[name="date_size_px"]').val()+'px');
    $('#date').css('color',$('input[name="date_font_color"]').val());
    $('input[name="date_left_px"]').bind('input propertychange change',function(){
        $('#date').css('left',$(this).val()+'px');
    })
    $('input[name="date_top_px"]').bind('input propertychange change',function(){
        $('#date').css('top',$(this).val()+'px');
    })
    $('input[name="date_size_px"]').bind('input propertychange change',function(){
        $('#date').css('font-size',$(this).val()+'px');
    })
    $('input[name="date_font_color"]').bind('input propertychange change',function(){
        $('#date').css('color',$(this).val());
    })

    var cancelNodeName = ["INPUT", "TEXTAREA", "BUTTON"];
    $.fn.extend({
        Drag: function (opts) {
            $(this).mousedown(function (e) {
                var width = $(this).width();
                var height = $(this).height();
                if (cancelNodeName.indexOf(e.target.nodeName) >= 0)
                    return true;
                if ($(e.target).closest(".resizable").length > 0)
                    return true;
                console.info("Drag");
                var currentTarget = $(this);
                var currentDisX = e.clientX - $(this).offset().left;
                var currentDisY = e.clientY - $(this).offset().top;
                var mousemoveEvent = function (event) {
                    if ($(event.target).closest(".resizable").length > 0)
                        return true;
                    if (opts && opts.beginmove) {
                        // beginmove返回true则继续执行，否则不执行
                        if (!opts.beginmove(event)) {
                            return true;
                        }
                    }
                    currentTarget.attr("moved", 1);
                    currentTarget.css("position", "absolute");
                    currentTarget.css("cursor", "hand");
                    var currentX = event.clientX;
                    var currentY = event.clientY;
                    var cursorX = event.clientX - currentDisX; // +$(this).offset().left;
                    var cursorY = event.clientY - currentDisY; // -$(this).offset().top;
                    console.log(cursorX,cursorY)
                    if(cursorX <= 0){
                        cursorX = 0;
                    }
                    if(cursorY <= 0){
                        cursorY = 0;
                    }
                    if(cursorX+width >= 375){
                        cursorX = 375-width;
                    }
                    if(cursorY+height >= 667){
                        cursorY = 667-height;
                    }
                    $(currentTarget).css("top", cursorY + "px").css("left", cursorX + "px");
                    if (opts && opts.resize) {
                        opts.resize(event, {
                            'width': $(currentTarget).width(),
                            'height': $(currentTarget).height()
                        });
                    }
                };
                $(document).on("mousemove", mousemoveEvent);
                var mouseupEvent = function () {
                    $(document).off("mousemove", mousemoveEvent);
                    $(document).off("mouseup", mouseupEvent);
                }
                $(document).on("mouseup", mouseupEvent);
                if (opts && opts.stopDefault) {
                    opts.stopDefault(e);
                }
            });
        },
        DisDrag: function () {
            $(this).attr("isDrag", 0);
            $(this).attr("drag", 0);
        },
        Resize: function (opts) {
            var options = {
                mode: {
                    "se-resize": 0,
                    "e-resize": 1,
                    "s-resize": 2
                }
            };
            var currentTarget = $(this);
            var currentDisTance = 5;
            var resizeMode = 0;
            var isResize = false;
            var isStartResize = false;
            // 创建3个div来实现拖动按钮。
            $(this).append(
                "<div  class='resizable'style='cursor:e-resize;width:7px;right:-5px;height:100%;top:0;z-index:99;position:absolute'></div>"
            );
            $(this).append(
                "<div class='resizable' style='cursor:s-resize;height:7px;bottom:-5px;width:100%;left:0;z-index:99;position:absolute'></div>"
            );
            $(this).append(
                "<div class='resizable' style='cursor:se-resize;width:16px;height:16px;z-index:99;right:1px;bottom:1px;position:absolute'></div>"
            );
            $(this).mousedown(function (e) {
                console.info($(e.target).closest(".resizable").length < 0);
                if (cancelNodeName.indexOf(e.target.nodeName) >= 0)
                    return true;
                if ($(e.target).closest(".resizable").length <= 0)
                    return true;
                console.info("move");
                var currentDisX = e.pageX - $(this).offset().left;
                var currentDisY = e.pageY - $(this).offset().top;



                var offsetWidth = $(this).width() - $(currentTarget).offset().left;
                var offsetHeight = $(this).height() - $(currentTarget).offset().top;
                var leftwidth = $(currentTarget).offset().left - $('#bgimg').offset().left;
                var leftheight = $(currentTarget).offset().top-$('#bgimg').offset().top;
                console.log(leftwidth,leftheight,'146行')
                var rmousemoveEvent = function (event) {
                    var currentX = event.clientX;
                    var currentY = event.clientY;
                    var cursorX = event.pageX - currentDisX; // +$(this).offset().left;
                    var cursorY = event.pageY - currentDisY; // -$(this).offset().top;
                    var resizeMode = options.mode[$(e.target).css("cursor")];
                    var width = cursorX + offsetWidth;
                    var height = cursorY + offsetHeight;
                    if(width+leftwidth >= 375){
                        width = 375-leftwidth
                    }
                    if(height+leftheight>=667){
                        height = 667-leftheight;
                    }
                    if (resizeMode == 0)
                        $(currentTarget).css("height", height + "px").css(
                            "width", width + "px");
                    else if (resizeMode == 1)
                        $(currentTarget).css("width", width + "px");
                    else
                        $(currentTarget).css("height", height + "px");
                    if (opts && opts.resize) {
                        opts.resize(event, {
                            'width': $(currentTarget).width(),
                            'height': $(currentTarget).height()
                        });
                    }
                };
                $(document).on("mousemove", rmousemoveEvent);
                var rmouseupEvent = function (event) {
                    $(document).off("mousemove", rmousemoveEvent);
                    $(document).off("mouseup", rmouseupEvent);
                };
                $(document).on("mouseup", rmouseupEvent);
                e.preventDefault();
            });
        }
    });

    $(function () {
        $("#qrcode").Drag();
        $("#qrcode").Resize();
    });
</script>
{template 'common/footer'}
<div class="toast_block ">
	<div class="toast_mask">	</div>
	<div class="toast_content">
		<img id="seeimg" src="" >
	</div>
</div>
<script>
	$(function(){
		$('.toast_mask').click(function(){
			console.log('1111');
			$('.toast_block').hide();
		})
	})
</script>


